<template>
    <div class="home">
        <div class="header">
            <div class="item" v-for="(item,i) in list" :key="i" >
               {{  item.title }}
              <div class="num">{{ item.payTotal | num }}</div>
              <div class="bottom">今日{{ item.title }}:{{ item.pay | num }}</div>
            </div>
        </div>
        <div class="content">
           <div class="timeInfo" id="box13">
              <div class="title">月销售额</div>
              <div id="main" style="width:100%;height:300px"></div>
           </div>
           <div class="area" id="box1">
              <div class="title">比例分配</div>
              <div id="main2" style="width:100%;height:300px"></div>
           </div>
         </div>
         <div class="itemContent">
             <div class="itemBox">
                  <el-card class="boxToday">
                    <div slot="header" class="clearflx">
                      <span>今日订单</span>
                    </div>
                    <div class="text item">
                      <el-row>
                        <el-col :span="8">
                           <div class="title">今日订单数据</div>
                           <div>{{ order.curOrderCount }}</div>
                        </el-col>
                        <el-col :span="8">
                           <div class="title">汇总确认订单</div>
                           <div>{{ order.curCollect }}</div>
                        </el-col>
                        <el-col :span="8">
                          <div class="title">累积金额</div>
                           <div>{{ order.curMoney }}</div>
                        </el-col>
                      </el-row>
                    </div>
                  </el-card>
                  <el-card class="boxMonth">
                    <div slot="header" class="clearfix">
                        <span>本月订单</span>
                    </div>
                    <div class="text item">
                      <el-row>
                        <el-col :span="8">
                           <div class="title">本月订单数</div>
                           <div>{{ order.orderCount }}</div>
                        </el-col>
                        <el-col :span="8">
                           <div class="title">汇总确认订单</div>
                           <div>{{ order.collect }}</div>
                        </el-col>
                        <el-col :span="8">
                           <div class="title">累积金额</div>
                           <div>{{ order.money }}</div>
                        </el-col>
                      </el-row>
                    </div>
                  </el-card>
              </div>
              <el-card class="boxInner">
                <div slot="header" class="clearfix">
                    <span>快捷入口</span>
                </div>
                <div class="text item">
                    <el-button type="primary" size="mini">产品管理</el-button>
                    <el-button size="mini">消息管理</el-button>
                    <el-button size="mini">内容管理</el-button>
                </div>
              </el-card>
          </div>
     </div>
  </template>
  <script>
  import * as echarts from 'echarts';
  export default{
    name:'Home',
    data(){
      return{
         order:{},    // 订单信息
         list:[],
         listTitle:['销售额','访问量','收藏量','支付量']
      }
    },
    filters:{
       num(val){
            if(!val)  return ''
            return val.toLocaleString()
       }
    },
    mounted(){
       this.getHomeCount();
       // 折线图
       this.getHomeFormat();
       // 饼图
       this.pie();
       // 获取订单数据
       this.getHomeOrder();
    },
    methods:{
       // 订单信息
       async getHomeOrder(){
          let res = await this.$api.getHomeOrder();
          this.order = res.data.list;
       },
       async getHomeCount(){
          const res = await this.$api.getHomeCount()
          this.list = res.data.data.list;
          this.list.forEach((item,i)=>{
            item.title = this.listTitle[i]
          })
       },
       async getHomeFormat(){
            const res = await this.$api.getHomeFormat();
            const resArr = res.data.result.data.sale_money;
            // 声明变量存储 x轴 y轴的数据
            const xData = [],yData = [],yBarData = [],pieData = [];
            resArr.forEach(ele=>{
              xData.push(ele.name)
              yData.push(ele.total_amount)
              yBarData.push(ele.num)
              // 声明对象 存储饼图数据
              const obj = {};
              obj.name = ele.name;
              obj.value = ele.total_amount;
              pieData.push(obj)
            })
            // 绘制折线图  动态数据
            this.line(xData,yData,yBarData)
            this.pie(pieData)
       },
       line(xData,yData,yBarData){
          var myChart = echarts.init(document.getElementById('main'))
          var option;
          option = {
            legend:{
               data:['销售额','销售量']
            },
            tooltip:{
               trigger:'axis'
            },
            xAxis: {
              type: 'category',
              axisTick:{
                 alignWithLabel:true,
              },
              //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              data:xData
            },
            yAxis: {
              type: 'value'
            },
            series:[
              { 
                name:'销售额',
                //data:[150, 230, 224, 218, 135, 147, 260],
                data:yData,
                type:'line',
                smooth:true,
              },
              {
                name:'销售量',
                //data:[80, 32, 91, 34, 190, 130, 120],
                data:yBarData,
                type:'bar',
                smooth:true,
              },
            ]
          };
          option&&myChart.setOption(option);
       },
       pie(pieData){
        var myChart = echarts.init(document.getElementById('main2'))
        var option;
        option = {
          // title: {
          //   text: 'Referer of a Website',
          //   subtext: 'Fake Data',
          //   left: 'center'
          // },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '销售额',
              type: 'pie',
              center:['50%','60%'],  // 圆心的坐标
              radius:'40%',          // 圆的半径  (有内半径 外半径)
              label: {
                // normal: {
                  show: true,          // 线条不显示 
                  position:'outside',   // 设置位置在饼状图的外面 inside(inner)为内部 outside  外部
                  //formatter: '{d}%',  // 格式化数值百分比输出
                //},
              },
              // 线条的样式
              labelLine: {
                //normal:{
                    length:30, //第一条线
                    length:10, //第二条线
                    lineStyle: {
                        width: 1, // 线条的宽度
                        color: "pink", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
                    }
                // }
              },
              // data: [
              //   { value: 1048, name: 'Search Engine' },
              //   { value: 735, name: 'Direct' },
              //   { value: 580, name: 'Email' },
              //   { value: 484, name: 'Union Ads' },
              //   { value: 300, name: 'Video Ads' }
              // ],
            data:pieData,
            emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
         option && myChart.setOption(option);
       }
    }
  }
  </script>
  
  <style lang="less" scoped>
  .home {
    transition:all .5s;
    margin:10px;
  }
  .header {
    display: flex;
    .item {
      flex: 1;
      height: 96px;
      padding: 10px;
      background: #fff;
      border-radius: 10px;
      margin-left:10px;
      font-weight: bold;
      color: #fff;
      // text-align: center;
      position: relative;
      .num {
        font-size: 22px;
        margin: 10px;
        color: #fff;
      }
      .bottom {
        position: absolute;
        border-top: 1px solid rgb(246, 245, 245);
        padding: 10px 20px;
        bottom: 0;
        right: 0;
        left: 0;
        color: #fff;
        font-weight: normal;
      }
    }
  
    .item:nth-child(1) {
      background-image: linear-gradient(#df887d, #88554d);
      margin-left:0;
    }
  
    .item:nth-child(2) {
      background-image: linear-gradient(#409eff, #2e556e);
    }
  
    .item:nth-child(3) {
      background-image: linear-gradient(#b54fa8, #713c7a);
    }
  
    .item:nth-child(4) {
      background-image: linear-gradient(#1cd2f1, #39717a);
    }
  }
  
  // 图表
  .border {
    border: 1px solid #eee;
    background: #eee;
  }
  .content {
    margin: 10px 0;
    display: flex;
    overflow: hidden;
    .timeInfo {
      flex:2;
      background: #fff;
      margin-right: 10px;
      border-radius:3px;
      .title{
        padding:10px;
      }
      #main{
         padding-left:10px;
      }
    }
    .area {
      flex:1;
      background: #fff;
      border-radius:3px;
      .title{
        padding:10px;
      }
      #main2{
        position:relative;
        left:10px;
      }
    }
  }
  .itemContent{
      display:flex;
      .itemBox{
           flex:2;
           display:flex;
           flex-direction:row;
          justify-content:space-between;
          margin-right: 10px;
          .boxToday{
            width: 49%;
          }
          .boxMonth{
            width: 49%;
          }
      }
      .boxInner{
         flex:0.95;
      }
      .text{
        text-align:center;
        font-size:12px;
        color:#666;
        .el-col{
           border-right:1px solid #eee;
        }
        .el-col:last-child{
           border-right:none;
        }
        .title{
          margin-bottom:10px;
        }
      }
    }
  
  //内容
  .home-footer {
    display: flex;
    padding-left: 20px;
    margin-bottom: 20px;
    .box-card {
      flex: 1;
      margin-right: 30px;
      span {
        font-weight: 600;
      }
    }
  }
  </style>